<template>
  <div>
    <div class="line">
      <div class="head">
        <a>班级介绍</a>
      </div>
      <div class="post">
        <p>班主任：<span class="red">{{classInfo.head_teacher_name}}</span></p><p v-for="d of classCommittee" :key="d.id">{{d.role_name}}：<span>{{d.member_name}}</span></p>
      </div>
    </div>
    <div class="line_01">
      <MarqueeTextDown ref="vMarqueeTextDown" :text="classProfile.class_desc" />
      <div class="tp"><img :src="classProfile.photo_url"></div>
    </div>
  </div>
</template>

<script>
import MarqueeTextDown from '@/modules/marquee-text/MarqueeTextDown.vue'
export default {
  props: {
    classInfo: {
      type: Object,
      default () { return {} }
    },
    classCommittee: {
      type: Array,
      default () { return [] }
    },
    classProfile: {
      type: Object,
      default () { return {} }
    }
  },
  components: {
    MarqueeTextDown
  },
  methods: {
    start () {
      this.$refs.vMarqueeTextDown.start()
    },
    stop () {
      this.$refs.vMarqueeTextDown.stop()
    }
  }
}
</script>

<style scoped>
.marquee-down {
  float: left;
  /* height: 205px; */
  height: 220px;
  font-size: 24px;
  width: 570px;
  color: #f5c32c;
}

.line {
  width: 940px;
  height: 50px;
      padding-top: 22px;
}

.head {
  width: 150px;
  height: 50px;
  background-image: url(@/components/temp4/imgs/01.png);
  background-size: 100% auto;
  margin-left: -5px;
  float: left;
}

.head a {
  display: block;
  width: 150px;
  height: 50px;

  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}

.post {
  width: 790px;
  float: left;
  white-space: nowrap;
}

.post p {
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color: #666;
  margin-right: 20px;
  display: inline-block;
}

.post p:last-child {
  margin-right: 0;
}

.post span {
  color: #50ce81;
}

.red {
  color: #ff7572;
}

.line_01 {
  clear: both;
  width: 900px;
  margin: 10px 20px;
  border-bottom: dashed 1px #ddd;
  overflow: hidden;
}

.gruop span {
  color: #666;
}

.tp {
  float: right;
  margin-bottom: 30px;
}

.tp img {
  border-radius: 5px;
  width: 330px;
  height: 205px;
}
</style>
